<nav class="crayons-tabs crayons-tabs--analytics" aria-label="<%= t("views.stats.period.aria_label") %>">
  <ul class="crayons-tabs__list">
    <li>
      <button data-text="<%= t("views.stats.period.week") %>" class="crayons-tabs__item crayons-tabs__item--current" id="week-button" aria-current="page"><%= t("views.stats.period.week") %></button>
    </li>
    <li>
      <button data-text="<%= t("views.stats.period.month") %>" class="crayons-tabs__item" id="month-button"><%= t("views.stats.period.month") %></button>
    </li>
    <li>
      <button data-text="<%= t("views.stats.period.infinity") %>" class="crayons-tabs__item" id="infinity-button"><%= t("views.stats.period.infinity") %></button>
    </li>
  </ul>
</nav>

<div class="summary-stats">
  <div class="summary-stats__col crayons-card mx-5">
    <div id="readers-card" class="py-3"></div>
  </div>
  <div class="summary-stats__col crayons-card mx-5">
    <div id="reactions-card" class="py-3"></div>
  </div>
  <div class="summary-stats__col crayons-card mx-5">
    <div id="comments-card" class="py-3"></div>
  </div>
</div>

<div class="graphs my-2">
  <div class="graphs__col crayons-card mx-5">
    <h2 class="mt-5 mx-5"><%= t("views.stats.readers") %></h2>
    <div class="charts-container">
      <canvas id="readers-chart"></canvas>
    </div>
  </div>
</div>

<div class="grid xl:grid-cols-2 gap-4 mx-5 mb-2">
  <div class="graphs__col crayons-card">
    <h2 class="mt-5 mx-5"><%= t("views.stats.reactions") %></h2>
    <div class="charts-container">
      <canvas id="reactions-chart"></canvas>
    </div>
  </div>
  <div class="graphs__col crayons-card">
    <h2 class="mt-5 mx-5"><%= t("views.stats.comments") %></h2>
    <div class="charts-container">
      <canvas id="comments-chart"></canvas>
    </div>
  </div>
</div>

<div class="grid xl:grid-cols-2 gap-4 mx-5 ">
  <div class="crayons-card p-2">
  <h2 class="mt-5 mx-5"><%= t("views.stats.traffic.text") %></h2>
  <table class="w-100 m-auto crayons-table">
    <thead>
      <tr>
        <th class="align-left"><%= t("views.stats.traffic.source") %></th>
        <th class="align-right"><%= t("views.stats.traffic.views") %></th>
      </tr>
    </thead>

    <tbody id="referrers-container">
    </tbody>
  </table>
  </div>

  <% if @reactions && @reactions.any? %>
    <div class="crayons-card p-4 overflow-auto" style="max-height:calc(100vh - 150px)">
      <h2 class="crayons-subtitle mb-2">
        <%= t("views.stats.reactions_history") %>
      </h2>
      <% @reactions.each do |reaction| %>
        <div class="fs-sm py-2 flex items-center">
          <div class="mr-3 relative">
            <img class="crayons-avatar h-8 w-8" style="height: 30px; width: 30px;" src="<%= reaction.user.profile_image_90 %>" width="25" height="25">
            <img class="crayons-avatar absolute -right-1 -bottom-1 border-base-inverted" style="height: 20px; width: 20px;" src="/assets/<%= reaction.reaction_category.icon %>.svg" width="16" height="16">
          </div>
          <div class="flex-1 flex items-center justify-between">
            <div>
              <strong><%= reaction.category %></strong>
              <%= t("views.stats.by") %> <a href="<%= URL.user(reaction.user) %>" class="fw-bold"><%= reaction.user.name %></a>
            </div>
            <div class="fs-xs">
              <%= reaction.readable_date %>
            </div>
          </div>
        </div>
      <% end %>
    </div>
  <% end %>
</div>
